<template>
  <a-modal okText="确定" cancelText="取消" @ok="ok"
           width="1000px" data-role="ignore-select-field" title="操作范围" v-model="visible">
    <a-button icon="plus" shape="round" style="margin-bottom: 10px;" type="primary" @click="addNew">添加</a-button>
    <a-table size="middle" :columns="columns" :dataSource="searchQuerys">
      <template slot="prefixSlot" slot-scope="text, record, index">
        <a-select v-model="record.prefix" style="width: 100%; max-width: 100px;" placeholder="前缀">
          <a-select-option v-for="item in prefixOptions" :value="item">
            <div style="height: 25px">{{ item }}</div>
          </a-select-option>
        </a-select>
      </template>

      <template slot="fieldSlot" slot-scope="text, record, index">
        <a-select v-model="record.fieldId" @change="() => fieldChange(record)"
                  style="width: 100%;" placeholder="请选择字段">
          <a-select-option v-for="item in fields" :value="item.id">{{ item.label }}</a-select-option>
        </a-select>
      </template>

      <template slot="suffixSlot" slot-scope="text, record, index">
        <a-select v-model="record.suffix" style="width: 100%; max-width: 100px;" placeholder="前缀">
          <a-select-option v-for="item in suffixOptions" :value="item">
            <div style="height: 25px">{{ item }}</div>
          </a-select-option>
        </a-select>
      </template>

      <template slot="joinTypeSlot" slot-scope="text, record, index">
        <a-select v-model="record.joinType" style="width: 100%; max-width: 100px;" placeholder="连接">
          <a-select-option value="and">并且</a-select-option>
          <a-select-option value="or">或者</a-select-option>
        </a-select>
      </template>

      <template slot="conditionSlot" slot-scope="text, record, index">
        <a-select v-model="record.searchCondition" style="width: 100%; max-width: 100px;" placeholder="条件">
          <a-select-option value="=">等于</a-select-option>
        </a-select>
      </template>

      <template slot="conditionSlot" slot-scope="text, record, index">
        <a-select v-model="record.searchCondition" style="width: 100%; max-width: 100px;" placeholder="条件">
          <a-select-option value="=">等于</a-select-option>
        </a-select>
      </template>

      <template slot="valueSlot" slot-scope="text, record, index">
        <DefaultValueInput v-if="!!record.fieldId"
                           :title="record.fieldTitle"
                           :value="record.fieldValue"
                           :defaultValueType="record.fieldValueType"
                           @update:title="t => record.fieldTitle = t"
                           @update:value="v => record.fieldValue = v"
                           @update:defaultValueType="d => record.fieldValueType = d"
                           :field-config="getFieldConfigById(record.fieldId, formDefinition)"/>
      </template>

      <template slot="action" slot-scope="text, record, index">
        <a @click="() => remove(record)">删除</a>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import {createFormDefinition, createMenuSearchQuery} from '@/components/hhd/design/FormDesigner/types';
import DefaultValueInput from '@/components/hhd/design/FormAction/DefaultValueInput.vue';
import {getFieldConfigById} from '@/utils/FormDesignUtils';

export default {
  name: 'FormMenuSearchQuery',
  components: {DefaultValueInput},
  data() {
    return {
      visible: false,
      formDefinition: createFormDefinition(),
      columns,
      searchQuerys: [],
      prefixOptions: [' ','(', '((', '(((', '((((', '((((('],
      suffixOptions: [' ', ')', '))', ')))', '))))', ')))))']
    };
  },
  methods: {
    getFieldConfigById,
    fieldChange(record) {
      record.fieldTitle = undefined;
      record.fieldValue = undefined;
      record.fieldValueType = undefined;
    },
    remove(record) {
      this.$confirm({
        okText: '确定',
        cancelText: '取消',
        title: '确定删除吗?',
        content: '删除后不可恢复, 确定删除吗?',
        onOk: () => {
          let index = this.searchQuerys.findIndex(item => item.id === record.id);
          if (index !== -1) {
            this.searchQuerys.splice(index, 1);
          }
        }
      });
    },
    check() {
      let list = this.searchQuerys || [], flag = false;
      list.forEach(f => {
        if (!f.fieldId || !f.searchCondition ||
            (f.fieldValue === null || f.fieldValue === undefined || f.fieldValue === '')) {
          flag = true;
        }
      });
      if (flag) {
        this.$message.error('请选择数据域, 字段值 和 条件');
        return false;
      }
      let count = 0;
      list.forEach(f => {
        count += f.prefix && f.prefix.length || 0;
        count -= f.suffix && f.suffix.length || 0;
      });
      if (count !== 0) {
        this.$message.error('前后括号设置的不匹配');
        return false;
      }
      return true;
    },
    ok() {
      if (!this.check()) return;
      this.$emit('ok', this.searchQuerys);
      this.close();
    },
    setData(searchQuerys, formDefinition) {
      this.formDefinition = formDefinition;
      this.searchQuerys = searchQuerys || [];
      this.searchQuerys = JSON.parse(JSON.stringify(this.searchQuerys));
      if (!this.searchQuerys.length) {
        this.addNew();
      }
      this.open();
    },
    addNew() {
      this.searchQuerys.push(createMenuSearchQuery());
    },
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
  computed: {
    fields() {
      let list = this.formDefinition && this.formDefinition.fields || [];
      return list;
    },
  }
};

const columns = [
  {
    align: 'center',
    title: '前缀',
    scopedSlots: {
      customRender: 'prefixSlot'
    },
    width: 100,
  },
  {
    align: 'center',
    title: '数据域',
    scopedSlots: {
      customRender: 'fieldSlot'
    },
  },
  {
    align: 'center',
    title: '条件',
    scopedSlots: {
      customRender: 'conditionSlot'
    },
    width: 100,
  },
  {
    align: 'center',
    title: '数据值',
    scopedSlots: {
      customRender: 'valueSlot'
    },
  },
  {
    align: 'center',
    title: '后缀',
    scopedSlots: {
      customRender: 'suffixSlot'
    },
    width: 100,
  },
  {
    align: 'center',
    title: '连接类型',
    scopedSlots: {
      customRender: 'joinTypeSlot'
    },
    width: 100,
  },
  {
    align: 'center',
    title: '操作',
    scopedSlots: {
      customRender: 'action'
    },
    width: 100,
  }
];
</script>